<template>
  <div id="page-activity">
    <div class="page-head">
      <a-select style="width: 20%" v-model="page_scene" @change="handleChange">
        <a-select-option value="">
          页面场景
        </a-select-option>
        <a-select-option value="1">
          普通页面
        </a-select-option>
        <a-select-option value="2">
          会员中心
        </a-select-option>
        <a-select-option value="3">
          聚合CPS
        </a-select-option>
        <a-select-option value="4">
          分类页
        </a-select-option>
      </a-select>

      <a-select style="width: 25%;margin-left: 5%" v-model="page_sort" @change="handleChange">
        <a-select-option value="">
          页面类型
        </a-select-option>
        <a-select-option value="1">
          H5
        </a-select-option>
        <a-select-option value="2">
          微信小程序
        </a-select-option>
        <a-select-option value="3">
          聚合APP(原生)
        </a-select-option>
      </a-select>

      <a-input v-model.trim="page_name" style="width: 30%;margin-left: 5%" placeholder="请输入页面名称进行搜索">
        <a-icon slot="prefix" type="search"/>
      </a-input>

      <a-button type="primary" style="width: 10%;margin-left: 5%" @click="currentChange(1)">
        搜索
      </a-button>
    </div>
    <div class="page-content">
      <div class="content-head">
        <div class="left">
          页面总数: {{main_page_pagination.total}}
        </div>
        <div content="right">
          <a-button icon="plus" style="margin-right: 10px" @click="showModal">添加页面</a-button>
          <a-tooltip>
            <template slot="title">
              Tips: 同一类型仅允许设置一个默认首页，其他页面为自定义页面
            </template>
            <a-icon type="alert" style="color: #ff9b19;font-size: 18px;"/>
          </a-tooltip>
        </div>
      </div>

      <a-spin :spinning="loading">
        <!-- 主活动列表 -->
        <div class="main-page-list">

          <div class="table-box">
            <a-table :pagination="{
                          pageSize: main_page_pagination.pageSize,
                          current: main_page_pagination.current,
                          total: main_page_pagination.total,
                          showQuickJumper: true,
                          onChange: currentChange
                      }"
                     :columns="columns" :data-source="main_page_list" :rowKey="record => record.id" >
                <span slot="tags" class="type-box" slot-scope="tags, record"  @mouseenter="mouseenter(record.id)">
                  <a-tooltip v-show="record.page_type.includes('5')">
                    <template slot="title">
                      wap
                    </template>
                    <i style="color: #5f20fe" class="iconfont icon-ht_btn_wap"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('4')">
                    <template slot="title">
                      支付宝
                    </template>
                    <i style="color: #4184ff" class="iconfont icon-ht_btn_alipay"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('3')">
                    <template slot="title">
                      APP
                    </template>
                    <i style="color: #ffa800" class="iconfont icon-ht_btn_app"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('2')">
                    <template slot="title">
                      小程序
                    </template>
                    <i style="color: #00dfb9" class="iconfont icon-ht_btn_smallprogram"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('1')">
                    <template slot="title">
                      公众号
                    </template>
                    <i style="color: #29ba9c" class="iconfont icon-ht_btn_gongzhonghao"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('7')">
                    <template slot="title">
                      聚合APP(原生)
                    </template>
                    <i style="color: #d5ed19" class="iconfont icon-fontclass-cps"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('0')">
                    <template slot="title">
                      其他页面
                    </template>
                    <i style="color: #ff3d38" class="iconfont icon-ht_btn_otherpage"></i>
                  </a-tooltip>
                  <a-popover>
                    <template slot="content">
                      <a-checkbox-group v-if="record.page_sort == 1" name="checkboxgroup" v-model="record.page_type" @change="onChange($event,record)" >
                        <a-checkbox value="1"> 公众号</a-checkbox><br/>
                        <a-checkbox value="3"> APP</a-checkbox><br/>
                        <a-checkbox value="4"> 支付宝</a-checkbox><br/>
                        <a-checkbox value="5"> wap</a-checkbox><br/>
                        <a-checkbox value="7"> 聚合APP(原生)</a-checkbox><br/>
                        <a-checkbox value="0"> 其他页面</a-checkbox>
                      </a-checkbox-group>
                      <a-checkbox-group v-if="record.page_sort == 2" name="checkboxgroup" v-model="record.page_type" @change="onChange($event,record)" >
                        <a-checkbox value="2"> 小程序</a-checkbox><br/>
                        <a-checkbox value="0"> 其他页面</a-checkbox>
                      </a-checkbox-group>
                      <a-checkbox-group v-if="record.page_sort == 3" name="checkboxgroup" v-model="record.page_type" @change="onChange($event,record)" >
                        <a-checkbox value="7"> 聚合APP(原生)</a-checkbox><br/>
                        <a-checkbox value="0"> 其他页面</a-checkbox>
                      </a-checkbox-group>
                    </template>
                    <div style="position: relative">
                      <a-icon v-show="mouse_hover_id == record.id &&record.page_scene !=4 " style="color: #29ba9c;cursor: pointer;font-size: 18px;margin-top: 3px;" type="form" />
                    </div>
                  </a-popover>
                </span>
                <span slot="action" class="edit-box" slot-scope="text, record">
                  <a-tooltip>
                    <template slot="title">
                      预览
                    </template>
                    <i class="iconfont icon-ht_operation_perview" @click.stop="previewIt(record.id)"></i>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">
                      编辑
                    </template>
                    <i class="iconfont icon-ht_operation_edit" @click.stop="toPage(record)"></i>
                  </a-tooltip>
                  <a-tooltip v-if="record.page_scene != 2 && record.page_sort != 3">
                    <template slot="title">
                      复制链接
                    </template>
                    <i class="iconfont icon-ht_operation_copyline"
                       v-clipboard:copy="getCopyLink(record)"
                       v-clipboard:success="copy"
                       v-clipboard:error="onError"></i>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">
                      复制页面
                    </template>
                    <i class="iconfont icon-ht_operation_copypage" @click.stop="copyIt(record.id)"></i>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">
                      删除
                    </template>
                    <i class="iconfont icon-ht_operation_delete" @click.stop="deleteIt(record.id)"></i>
                  </a-tooltip>
                </span>
            </a-table>
          </div>

        </div>
      </a-spin>
    </div>

    <a-modal width="800px" v-model="previewVisible" title="预览" @ok="close">
      <div>
        <!-- 预览区域 -->
        <layout-preview :previewData="previewData" />
      </div>
    </a-modal>

    <a-modal v-model="visible" title="选择页面类型" @ok="handleOk" >
      <div class="modal-box">
        <p class="modal-title">页面类型</p>
        <div class="page-type-box">
          <span :class="[current_page_sort === '1'?'active':'']" @click="choose('1')">H5(含公众号)</span>
          <span :class="[current_page_sort === '2'?'active':'']" @click="choose('2')">微信小程序</span>
          <span :class="[current_page_sort === '3'?'active':'']" @click="choose('3')">聚合APP(原生)</span>
        </div>
      </div>
      <div class="modal-box" style="margin-top: 20px">
        <p class="modal-title">页面场景</p>
        <div class="page-type-box">
          <span :class="[current_page_scene === '1'?'active':'']" @click="choose('1','page')">{{current_page_sort != 3?'普通页面':'首页'}}</span>
          <span :class="[current_page_scene === '2'?'active':'']" @click="choose('2','page')" v-if="current_page_sort != 3">会员中心</span>
          <span :class="[current_page_scene === '4'?'active':'']" @click="choose('4','page')" v-if="current_page_sort != 3">商品分类页</span>
          <!--<span v-if="current_page_sort != 3 && extra_data.aggregation_cps && extra_data.aggregation_cps.open_state == 1" :class="[current_page_scene === '3'?'active':'']" @click="choose('3','page')">聚合CPS</span>-->
        </div>
      </div>
    </a-modal>

    <a-modal width="1080px" v-model="templateVisible"  @ok="closeTemplate" :footer="null" :dialogStyle="dialogStyle">
      <template slot="title">
      <div class="template-head">
        <div class="vertical"></div>
        <div class="left">
          模板
        </div>
      </div>
      </template>
      <div class="head">
        <div class="head-title">模版管理：</div>
        <div class="tab-box">
          <a-button style="background: #5AB79D;;color:#ffffff" @click="decorateSync">
            点击同步
          </a-button>
        </div>
      </div>
      <div class="head">
        <div class="head-title">页面：</div>
        <div class="tab-box">
          <a-radio-group v-model="template_page_type" @change="changePageType" button-style="solid">
            <a-radio-button value="0">
              {{current_page_sort === '1'?'H5普通页面': current_page_sort === '2'?'小程序普通页面':'聚合APP原生页面'}}
            </a-radio-button>
            <a-radio-button value="1" v-if="extra_data.aggregation_cps && extra_data.aggregation_cps.open_state == 1 && current_page_sort !== '3'">
              聚合CPS
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="head" v-if="template_page_type === '0' && category.length > 0">
        <div class="head-title">行业：</div>
        <div class="tab-box">
          <a-radio-group v-model="category_name" @change="getTemplateList(1)" button-style="solid">
            <a-radio-button :value="item" v-for="(item,index) in category" :key="index" style="margin-bottom:10px">
              {{item}}
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="template-box" v-if="template_page_type === '0'">
        <div class="template-item" v-for="(item) in template_list" @click="chooseTemplate(item.sync_id)" :key="item.sync_id" :style="{'backgroundImage': 'url(' + item.thumb_url + ')'}">
          <div class="img-box" :class="[templateActive == item.sync_id ? 'active' : '',item.sync_id === -1 ? 'blank' :'']">
            <!-- <img :src="item.thumb_url" alt="" v-if="item.sync_id !== -1"> -->
            <img src="../../../develop/ueditor1_4_3_3/themes/default/images/plus.png" alt="" class="plus-icon" v-if="item.sync_id == -1">
            <div class="status-img" v-if="templateActive == item.sync_id"><a-button style="color:#5AB79D;background:#FFFFFF;" @click="closeTemplate">编辑</a-button></div>
          </div>
          <div class="template-title">{{item.title}}</div>
        </div>
      </div>
      <div class="template-box" v-if="template_page_type === '1'">
        <div class="template-item" v-for="(item, index) in templates" @click="chooseTemplate(index)" :key="index" :style="{'backgroundImage': 'url(' + item.img + ')'}">
          <div class="img-box" :class="[templateActive == index ? 'active' : '',index === 0 ? 'blank' :'']">
            <img src="../../../develop/ueditor1_4_3_3/themes/default/images/plus.png" alt="" class="plus-icon" v-if="item.sync_id == -1">
            <div class="status-img" v-if="templateActive == index"><a-button style="color:#5AB79D;background:#FFFFFF;" @click="closeTemplate">编辑</a-button></div>
          </div>
          <p class="template-title">{{item.title}}</p>
        </div>
      </div>
      <!-- 分页 -->
      <div style="text-align: center;">
        <a-pagination
            class="page-pagination"
            showQuickJumper
            :pageSize="template_pagination.pageSize"
            :current="template_pagination.current"
            :total="template_pagination.total"
            @change="getTemplateList"/>
      </div>

    </a-modal>


  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
	import cpsImage from "@/resource/images/cps.png";
	import layoutPreview from '../design/layout-preview/index.vue'; // 组件预览区域
	// 组件实例
	import Vdc from '@/core/vdc/vdc';
	const columns = [
		{
			title: 'ID',
			dataIndex: 'id',
			key: 'id',
		},
		{
			title: '上次修改时间',
			dataIndex: 'updated_at',
			key: 'updated_at',
		},
		{
			title: '页面名称',
			dataIndex: 'page_name',
			key: 'page_name',
		},
		{
			title: '页面场景',
			dataIndex: 'page_scene_depict',
			key: 'page_scene_depict',
		},
		{
			title: '显示终端',
			dataIndex: 'page_sort_depict',
			key: 'page_sort_depict',
		},
		{
			title: '页面类型',
			dataIndex: 'page_type',
			key: 'page_type',
			scopedSlots: { customRender: 'tags' },
		},
		{
			title: '操作',
			key: 'action',
			scopedSlots: { customRender: 'action' },
			width: 250,
		},
	];
	const templates = [
    {
    	// img: emptyImage,
	    page: "首页",
	    sync_id: -1,
	    // thumb_url: emptyImage,
	    title: "空白模板",
    },
		{
			img: cpsImage,
			title: '聚合CPS模板一'
		},
  ]
	export default {
		data() {
			return {
        dialogStyle:{
          top:'24px'
        },
				emptyImage,
				templates,
				columns: columns,
				page_name: '',
				page_sort: '',
				page_scene: '',
				mouse_hover_id: '',
				visible: false,
				current_page_sort: '1',
				current_page_scene: '1',
				templateVisible: false,
        templateActive: 0,
				category: [],

        // 预览数据
				previewVisible: false,
				previewData: {},

				extra_data: {},
				// 状态
				loading: false,
				// 主页列表
				main_page_list: [],
				// 主分页的页码
				main_page_pagination: {
					current: 1,
					pageSize: 10,
					total: 0
				},

        // 选择模板
        template_page_type: '0',
				category_name: "",
				// 模板列表
				template_list: [],
				// 模板分页的页码
				template_pagination: {
					current: 1,
					pageSize: 9,
					total: 0
				},
			}
		},
		components: {
			layoutPreview,
		},
		computed: {
		},
    created() {
			this.currentChange(1);
    },
		methods: {
			getCopyLink(record) {
				if(record.page_scene == 1) {
					return `${record.page_sort == 2 ? '/packageG/newDiy/newDiy?page_id='+record.id : this.fun.getSiteRoot()+'/addons/yun_shop/?menu#/newDiy?page_id='+record.id+'&i='+this.fun.getKeyByI()}`
        } else if(record.page_scene == 4) {
          // 分类页
					return `${record.page_sort == 2 ? '/packageG/pages/diyCategory/diyCategory?page_id='+record.id : this.fun.getSiteRoot()+'/addons/yun_shop/?menu#/diyCategory?page_id='+record.id+'&i='+this.fun.getKeyByI()}`
        } else if(record.page_scene == 3) {
					return `${record.page_sort == 2 ? '/packageG/cps/cpsPage/cpsPage?page_id='+record.id : this.fun.getSiteRoot()+'/addons/yun_shop/?menu#/cpsPage?page_id='+record.id+'&i='+this.fun.getKeyByI()}`
        }

      },
			copy(e) {
				this.$message.success("复制链接成功");
			},
			onError(e) {
				this.$message.error('复制失败');
			},
			choose(type, str) {
				if(str === 'page') {
					this.current_page_scene = type;
        }else {
					this.current_page_sort = type;
					if(this.current_page_sort === '3' && this.current_page_scene === '3') {
						this.current_page_scene = '1';
          }
        }
      },
			toPage(item) {
				let url = window.location.href.substring(0,window.location.href.indexOf('route='));
				// /admin/shop?c=site&a=entry&m=yun_shop&do=7900& 独立版
				// /web/index.php?c=site&a=entry&m=yun_shop&do=1333& 微擎版
				window.location.href = url + 'route=plugin.decorate.admin.page.detail&i='+this.fun.getKeyByI()+'#/design?page_id='+item.id+'&page_sort='+ item.page_sort + '&page_scene=' + item.page_scene;
				// this.$router.push(this.fun.getUrl("/design", {}, {page_id: item.id, page_sort: item.page_sort, page_scene: item.page_scene}));
      },
			showModal() {
				this.visible = true;
			},
			mouseenter(id) {
				this.mouse_hover_id = id;
      },
			onChange(checkedValues, record) {
				if(checkedValues[checkedValues.length-1] === '0') {
					record.page_type = ['0'];
				}else if(checkedValues.includes('0')){
					record.page_type = checkedValues.filter(function(item) {
						return item !== '0'
					});
				}else {
					record.page_type = checkedValues;
				}

				if(checkedValues.length <=0 ) {
					record.page_type = ['0'];
				}

				$http.post("plugin.decorate.admin.decorate.edit-decorate-type", { decorate_id: record.id,page_type: record.page_type.join(',') }, "loading").then(response => {
					if (response.result === 1) {
						this.currentChange(this.main_page_pagination.current);
						// this.$message.success("删除成功");
					} else {
						// if (response.msg) {
						// 	this.$message.error(response.msg);
						// }
					}
				}).catch(err => {
					console.log(err);
				});
				// console.log('checked = ', checkedValues, record);
			},
			handleChange(value) {
				this.currentChange(1);
			},
			/**
			 * 分页切换
			 */
			currentChange(page) {
				this.main_page_pagination.current = page;
				$http
						.post(
								"plugin.decorate.admin.decorate.get-list",
								{ page: page, page_name: this.page_name, page_sort: this.page_sort, page_scene: this.page_scene },
								"loading"
						)
						.then(response => {
							if (response.result === 1) {
								this.main_page_pagination.total = response.data.total;
								this.main_page_pagination.pageSize = response.data.per_page;
								this.main_page_list = response.data.data;
								this.extra_data = response.data.extra_data || {};
							} else {
								this.main_page_list = [];
                this.main_page_pagination.total = response.data.total||0;
								this.main_page_pagination.pageSize = response.data.per_page||0;
								if (response.data.status === -1) {
									this.currentChange(1);
								}
								// this.$message.error(response.msg);
							}
						})
						.catch(err => {
							console.error(err);
						});
			},

			/**
			 * 删除页面
			 * @param {string} id 页面ID
			 */
			deleteIt(id) {
				const that = this;
				// 弹层
				this.$confirm({
					title: '确认删除该装修页面？',
					onOk() {
						$http.post("plugin.decorate.admin.decorate.del", { id: id }, "loading").then(response => {
							if (response.result === 1) {
								that.currentChange(that.main_page_pagination.current);
								that.$message.success("删除成功");
							} else {
								if (response.msg) {
									that.$message.error(response.msg);
								}
							}
						}).catch(err => {
							console.log(err);
						});
					}
				});

			},
			/**
			 * 复制页面
			 * @param {string} id 页面ID
			 */
			copyIt(id) {
				$http.post("plugin.decorate.admin.decorate.copy-page", { id: id }, "loading").then(response => {
					if (response.result === 1) {
						this.currentChange(this.main_page_pagination.current);
						this.$message.success("复制成功");
					} else {
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
      previewIt(id) {
	      $http.post("plugin.decorate.admin.decorate.get-decorate", { decorate_id: id }, "loading").then(response => {
		      if (response.result === 1) {
			      this.previewData =  JSON.parse(response.data.datas).map(x => {
			       return new Vdc({
			         id : x.id,
			         component_key : x.component_key,
			         component_title : x.component_title,
			         template_id : x.template_id,
			         remote_data : x.remote_data,
			         remote_style : {},
			       })
			      });
			      this.previewVisible = true;
		      } else {
			      this.previewVisible = false;
			      if (response.msg) {
				      this.$message.error(response.msg);
			      }
		      }
	      }).catch(err => {
		      console.log(err);
	      });
      },
			close() {
				this.previewVisible = false;
      },
			handleOk(e) {
				if(this.current_page_scene === '1' && this.current_page_sort !== '3') {
					this.getCategory();
					return;
				}
				let url = window.location.href.substring(0,window.location.href.indexOf('route='));
				// /admin/shop?c=site&a=entry&m=yun_shop&do=7900& 独立版
				// /web/index.php?c=site&a=entry&m=yun_shop&do=1333& 微擎版
				window.location.href = url + 'route=plugin.decorate.admin.page.detail&i='+this.fun.getKeyByI()+'#/design?page_sort='+this.current_page_sort + '&page_scene=' + this.current_page_scene;
				// this.$router.push(this.fun.getUrl("/design", {}, {page_sort: this.current_page_sort, page_scene: this.current_page_scene}));
				this.visible = false;
			},
			chooseTemplate(item) {
				this.templateActive = item;
			},
			changePageType() {
				if(this.template_page_type === '0' && this.template_list[0]) {
					this.templateActive = this.template_list[0].sync_id
				}else {
					this.templateActive = 0;
				}
			},
			getTemplateList(page) {
				this.template_list = [];
				this.template_pagination.current = page;
				$http.get('plugin.decorate.admin.decorate-diy.search',{
					category_name: this.category_name,
					pages_name: "首页",
					type_name: this.current_page_sort === '1'?'H5':'小程序',
					page: page,
          page_size:this.template_pagination.pageSize
				},"loading").then((response)=>{
					if (response.result === 1) {
						this.template_pagination.total = response.data.total;
						this.template_pagination.pageSize = response.data.per_page;
						this.template_list.push(templates[0]);
						this.template_list = this.template_list.concat(response.data.data||[]);
						if(this.template_page_type === '0' && this.template_list[0]) {
							this.templateActive = this.template_list[0].sync_id
            }
					} else {
						this.template_list = [];
						if (response.data.status === -1) {
							this.currentChange(1);
						}
						// this.$message.error(response.msg);
					}
				})
			},
			getCategory() {
				$http.get('plugin.decorate.admin.decorate-diy.get-category',{},'loading').then((response)=>{
					if (response.result === 1) {
						this.category = Object.values(response.data.category) || [];
						this.getTemplateList(1);
						this.templateVisible = true;
          }else {
						this.template_list = [];
						this.template_list.push(templates[0]);
						this.template_list = this.template_list.concat(response.data.data||[]);
						if(this.template_page_type === '0' && this.template_list[0]) {
							this.templateActive = this.template_list[0].sync_id
						}
						this.templateVisible = true;
						// this.$message.error(response.msg);
          }
				})
			},
			decorateSync() {
				$http.get('plugin.decorate.admin.decorate-diy.chick-sync',{},'loading').then((response)=>{
					if (response.result === 1) {
						this.$message.success(response.msg);
						this.getCategory();
					}else {
						this.$message.error(response.msg);
					}
				})
			},
			closeTemplate() {
				if(this.template_page_type === '1') {
					// 聚合CPS页面
					let url = window.location.href.substring(0,window.location.href.indexOf('route='));
					window.location.href = url + 'route=plugin.decorate.admin.page.detail&i='+this.fun.getKeyByI()+'#/design?page_sort='+this.current_page_sort + '&page_scene=3&active=' + this.templateActive;
					this.templateVisible = false;
					this.visible = false;
        }else {
					if(this.templateActive === -1) {
						// 空白模板
						let url = window.location.href.substring(0,window.location.href.indexOf('route='));
						window.location.href = url + 'route=plugin.decorate.admin.page.detail&i='+this.fun.getKeyByI()+'#/design?page_sort='+this.current_page_sort + '&page_scene=' + this.current_page_scene;
						this.templateVisible = false;
						this.visible = false;
          }else {
						this.createdPage()
          }
        }
      },
			createdPage() {
				// 启用选中已装修好的模板
				$http.get('plugin.decorate.admin.decorate-diy.choose',{id: this.templateActive},"loading").then((response)=>{
					if (response.result === 1) {
						let url = window.location.href.substring(0,window.location.href.indexOf('route='));
						window.location.href = url + 'route=plugin.decorate.admin.page.detail&i='+this.fun.getKeyByI()+'#/design?page_sort='+this.current_page_sort + '&page_scene=' + this.current_page_scene + '&page_id='+response.data.id;
						this.templateVisible = false;
						this.visible = false;
					}else {
						this.$message.error(response.msg);
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
  #page-activity {
    padding: 30px 20px 20px 20px;
    position: relative;

  }

  .page-head {
    display: flex;
  }

  // 主活动列表(左侧)
  .main-page-list {
    width: 100%;
    margin-top: 15px;

    // 分页
    .ant-pagination {
      text-align: center;
      margin-top: 24px;
    }
  }

  .table-box {
    font-weight: bold;
  }

  .content-head {
    display: flex;
    margin-top: 15px;
    .left {
      position: relative;
      font-weight: bold;
      font-size: 16px;
      margin-left: 10px;
      display: flex;
      align-self: center;
      justify-self: center;
      flex: 1;
    }
    .left::before {
      content: "";
      width: 5px;
      height: 25px;
      position: absolute;
      top: 0;
      left: -10px;
      background: #29ba9c;
    }
    .right {
      display: flex;
      align-self: center;
      justify-self: center;
      flex: 0 0 100px;
    }
  }

  .edit-box {
    display: flex;
    margin-right: 30px;
    i {
      flex: 1;
      color: #999999;
      margin-left: 15px;
      cursor: pointer;
    }
    i:hover {
     color: #ffa800;
    }
  }

  .type-box {
    display: flex;
    i {
      margin-left: 8px;
    }
  }
  .modal-box {
    font-weight: bold;
    margin-top: 10px;
    justify-self: center;
    align-self: center;
    .page-type-box {
      margin: 10px 0 0 30px;
      display: flex;
      flex-wrap: wrap;
      span {
        background: white;
        padding: 5px 20px;
        border-radius: 15px;
        cursor: pointer;
      }
      .active {
        background: #29ba9c;
        color: white;
        padding: 5px 20px;
        border-radius: 15px;
      }
    }
  }

  .head {
    color: #333333;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .head-title {
          margin-right: 24px;
    }
    .tab-box {
      flex: 1;
    }
  }
  .template-box {
    color: #333333;
    display: flex;
    flex-wrap: wrap;
    padding: 0 107px;
    .template-item {
      margin: 5px 5px 40px 5px;
      border-radius: 8px;
      cursor: pointer;
      background-size: cover;
    width:150px;
    height:270px;
    }
    .img-box {
      position: relative;
              width: 150px;
        height: 270px;
      img {
        width: 100%;
        height: 270px;
      }
      .plus-icon{
        width: 44px !important;
        height: 44px !important;
        position: absolute;
         top: 113px;
        left: 53px;
      }
      .status-img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #29ba9c;
        i {
          font-size: 30px;
        }
      }
      &.active {
        // border: solid 1px #29ba9c;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
      }
    }
    .template-title {
      margin: 10px 0;
      text-align: center;
    }
  }
  .template-head{
    color: #333333;
    width: 100%;
    height: 32px;
    display: flex;
    line-height: 32px;
    .vertical{
      width: 4px;
      height: 24px;
      background-color:#29ba9c;
      margin-top: 4px;
    }
    .left{
          margin-left: 8px;
    }
  }
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
  border: 0;
  background: rgba(90,183,157,0.1);
  color: #5AB79D;
}
.ant-radio-button-wrapper{
  margin-right: 24px;
  background: rgba(246,246,246,1);
  color: #999999;
  border: 0;
}
.ant-radio-button-wrapper:not(:first-child)::before{
  width: 0;
}
.blank{
background: rgba(248,248,248,1);
border: 0 !important;
width: 150px;
height: 270px;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
  box-shadow: 0px 0 0 0 #29ba9c !important;
}
</style>
